<template>
    <div>
        <el-drawer
            v-model="isShow"
            size="50%"
            :destroy-on-close="true"
            @close="closeHandle"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
        >
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
            </template>
            <el-form :model="form" label-width="auto" label-position="right" ref="formRef" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="24" class="mt-0 mb-3">
                        <h4 class="tittle"><span class="tittle_dian me-2"></span><span>基本信息</span></h4>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择律师" required prop="name">
                            <el-input v-model="form.name" placeholder="双击选择律师" @click="SelectLawyerListRef.showList()" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择代理案件">
                            <el-input v-model="form.casecode" placeholder="请输入案件编号"  @click="SelectCase" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="案件名称">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择嫌疑人">
                            <el-select
                            v-model="form.sar"
                            placeholder="选择嫌疑人"
                            :disabled="isreadonly"
                            clearable
                            >
                            <el-option
                                v-for="item in sarList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否提交纸质材料">
                            <el-radio-group v-model="form.casecode" :readonly="isreadonly">
                                <el-radio value="1" border class="me-3">是</el-radio>
                                <el-radio value="0" border>否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="mt-0 mb-3">
                        <h4 class="tittle"><span class="tittle_dian me-2"></span><span>证件上传</span></h4>
                        <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="律师证">
                            <el-image
                            style="width: 100px; height: 100px"
                            :src="url"
                            :preview-src-list="srcList"
                            fit="cover"
                            class="me-3"
                            />
                            <el-button type="primary">点击上传</el-button>
                        </el-form-item>
                        
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="律师事务所证明">
                            <el-image
                            style="width: 100px; height: 100px"
                            :src="url"
                            :preview-src-list="srcList"
                            fit="cover"
                            class="me-3"
                            />
                            <el-button type="primary">点击上传</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="授权委托书/援助公函">
                            <el-image
                            style="width: 100px; height: 100px"
                            :src="url"
                            :preview-src-list="srcList"
                            fit="cover"
                            class="me-3"
                            />
                            <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple
                            :limit="1"
                            >
                            <el-button type="primary">点击上传</el-button>
                            </el-upload>
                            
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="授权再次刻录">
                            <el-button type="primary">点击刻录</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitHandle">提交</el-button>
                <el-button @click="isShow = false">关闭</el-button>
            </template>
        </el-drawer>
        <SelectLawyerList ref="SelectLawyerListRef" @getCaseDatas="getLawyerData"></SelectLawyerList>
        <SelectCaseList ref="SelectCaseListRef" @getCaseDatas="getCaseData"></SelectCaseList>
    </div>
</template>

<script setup>
const {proxy} = getCurrentInstance()
// import {getCaseInfoList,getCaseInfoInfo} from "@/api/CaseInfo/CaseInfo";
import SelectLawyerList from "@/components/Case/SelectLawyerList.vue";
import SelectCaseList from "@/components/Case/SelectCaseList.vue";
// 是否显示抽屉
const isShow = ref(false)
const isreadonly = ref(true)
const SelectLawyerListRef = ref()
const SelectCaseListRef = ref()
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
]
const sarList = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }])

// 抽屉标题
const title = ref('')
const rules = {
    name: [{ required: true, message: "案件名称不能为空", trigger: "change" }],
    unitId: [{ required: true, message: "办案单位不能为空", trigger: "blur" }],
    depid: [{ required: true, message: "办案部门不能为空", trigger: "blur" }],
}

const isAdd = ref(true)

const form = ref({
    
})
// 通知事件
const emit = defineEmits(['getCaseList'])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}

onMounted(() => {
    
})


const SelectCase = () => {
    SelectCaseListRef.value.showCaseList()
    // if(form.value.name){
    //     SelectCaseListRef.value.showCaseList()
    // }else{
    //     alert("选择律师")
    // }
}

const showAddEditCase = () => {
    title.value = '新增律师绑定信息';
    isAdd.value = true
    isreadonly.value = false
    changeShowStatus()
}

const showEditCase = async (data,OperateType) => {
    if(OperateType == "edit"){
        title.value = '修改案件信息'
        isAdd.value = false
        isreadonly.value = false
    }else{
        title.value = '案件信息详情'
        isAdd.value = false
        isreadonly.value = true
    }
    // 对传过来的案由中文进行查找出其对应的casebriefId值
    // await getCaseInfoInfo(data.caseCaseinfoId).then(res => {
    //         form.value = res.data
    //         getDepartment()
    //     })
    changeShowStatus()
}

defineExpose({showAddEditCase,showEditCase})


const submitHandle = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value['caseCaseinfoId']) {
                editCaseInfo(form.value).then(res => {
                    changeShowStatus()
                    emit('getCaseList', '来了老弟')
                })
            } else {
                createCaseInfo(form.value).then(res => {
                    changeShowStatus()
                    emit('getCaseList', '来了老弟')
                })
            }
        }
    });
}
const getCaseData = (data) => {
    console.log("儿子传过来数据了",data)
}
const getLawyerData = (data) => {
    console.log("儿子传过来数据了",data)
    form.value.name = data.name
}

// 关闭后的回调事件
const closeHandle = () => {
    form.value = {
        
    }
}
</script>

<style lang="scss" scoped>
h4{margin:0;}
.tittle{display: flex;align-items: center;color: #0077B9;}
:deep() .el-date-editor {
  width: 100%;
}
:deep() .el-cascader{width: 100%;}
:deep() .el-drawer__body{padding: 10px 20px;}
.tittle_dian{width:7px;height:16px;display: inline-block;background: #0077B9;}

// :deep() .el-radio__input{display: none;}

// .el-radio.is-bordered.is-checked {
//     border-color: var(--el-color-primary-dark-2);
// }
:deep().el-form-item__content{align-items: end;}
// .el-radio.is-bordered.is-checked{background:#409eff;border-color:#409eff;color: red;}
// .el-radio__input.is-checked+.el-radio__label{color: var(--el-color-waring);}
</style>